

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" href="/img/favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Han Qiu">
  <meta name="keywords" content="">
  
    <meta name="description" content="一、新增选择器1、属性选择器属性选择器可以根据元素特定的属性来选择元素。这样就可以不用借助于类或者id选择器  注意：类选择器、属性选择器、伪类选择器，权重为10  2、结构伪类选择器结构伪类选择器主要是根据文档结构来选择元素，常用于根据父级选择器里面的子元素 注意：:last-child CSS伪类代表父元素的最后一个子元素。如.item:last-child,选中并不是指.item类中的最后一">
<meta property="og:type" content="article">
<meta property="og:title" content="css3新特性">
<meta property="og:url" content="http://example.com/2022/02/14/css3%E6%96%B0%E7%89%B9%E6%80%A7/index.html">
<meta property="og:site_name" content="寒秋の博客">
<meta property="og:description" content="一、新增选择器1、属性选择器属性选择器可以根据元素特定的属性来选择元素。这样就可以不用借助于类或者id选择器  注意：类选择器、属性选择器、伪类选择器，权重为10  2、结构伪类选择器结构伪类选择器主要是根据文档结构来选择元素，常用于根据父级选择器里面的子元素 注意：:last-child CSS伪类代表父元素的最后一个子元素。如.item:last-child,选中并不是指.item类中的最后一">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E9%80%89%E6%8B%A9%E5%99%A8%E6%9D%83%E9%87%8D.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E7%BB%93%E6%9E%84%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/nth-child(n).png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/nth-child%E6%9D%83%E9%87%8D.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/nth-child%E7%A4%BA%E4%BE%8B.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/before%E5%92%8Cafter%E4%BC%AA%E5%85%83%E7%B4%A0.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF1.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF1_2.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF1_3.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF2.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF2_2.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF2_3.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF3.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF3_2.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/filter%E8%AF%AD%E6%B3%95.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/filter%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/filter%E7%A4%BA%E4%BE%8B%E6%95%88%E6%9E%9C.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/calc%E8%AF%AD%E6%B3%95.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/calc%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/calc%E7%A4%BA%E4%BE%8B%E6%95%88%E6%9E%9C.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E8%BF%87%E6%B8%A11.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E8%BF%87%E6%B8%A12.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/transform_1.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E5%8A%A8%E7%94%BB%E5%B8%B8%E8%A7%81%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E5%8A%A8%E7%94%BB%E9%80%9F%E5%BA%A6%E6%9B%B2%E7%BA%BF.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E9%80%8F%E8%A7%86perspective.png">
<meta property="article:published_time" content="2022-02-14T03:34:59.000Z">
<meta property="article:modified_time" content="2022-02-15T03:49:15.352Z">
<meta property="article:author" content="Han Qiu">
<meta property="article:tag" content="css3">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8.png">
  
  
  <title>css3新特性 - 寒秋の博客</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4/github-markdown.min.css" />
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hint.css@2/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.8.14","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 6.0.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>blogs</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="css3新特性">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2022-02-14 11:34" pubdate>
        2022年2月14日 中午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      4.9k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      41 分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">css3新特性</h1>
            
            <div class="markdown-body">
              <h3 id="一、新增选择器"><a href="#一、新增选择器" class="headerlink" title="一、新增选择器"></a>一、新增选择器</h3><h4 id="1、属性选择器"><a href="#1、属性选择器" class="headerlink" title="1、属性选择器"></a>1、属性选择器</h4><p>属性选择器可以根据元素特定的属性来选择元素。这样就可以不用借助于类或者id选择器</p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8.png" srcset="/img/loading.gif" lazyload alt="属性选择器"></p>
<p><strong>注意：类选择器、属性选择器、伪类选择器，权重为10</strong></p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E9%80%89%E6%8B%A9%E5%99%A8%E6%9D%83%E9%87%8D.png" srcset="/img/loading.gif" lazyload alt="选择器权重"></p>
<h4 id="2、结构伪类选择器"><a href="#2、结构伪类选择器" class="headerlink" title="2、结构伪类选择器"></a>2、结构伪类选择器</h4><p>结构伪类选择器主要是根据文档结构来选择元素，常用于根据父级选择器里面的子元素</p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E7%BB%93%E6%9E%84%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8.png" srcset="/img/loading.gif" lazyload alt="结构伪类选择器"><br><strong><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000020109948">注意：:last-child CSS伪类代表父元素的最后一个子元素。如.item:last-child,选中并不是指.item类中的最后一个元素, 而是既是.item又是父元素的最后一个子元素的元素</a></strong></p>
<ul>
<li>nth-child(n)选择某个父元素的一个或多个特定的子元素（括号内的参数必须为n，不能用a…）<ul>
<li>n可以是数字，关键字和公式</li>
<li>n如果是数字，就选择第n个元素，里面的数字从1开始</li>
<li>n可以是关键字：even偶数，odd奇数</li>
<li>n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）</li>
</ul>
</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/nth-child(n).png" srcset="/img/loading.gif" lazyload alt="nth-child(n)"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/nth-child%E6%9D%83%E9%87%8D.png" srcset="/img/loading.gif" lazyload alt="nth-child权重"></p>
<ul>
<li>nth-child(n)和nth-of-type(n)的区别：nth-child先找第n个孩子，再判断其类型。nth-of-type先选出满足类型的孩子，再找第n个孩子</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/nth-child%E7%A4%BA%E4%BE%8B.png" srcset="/img/loading.gif" lazyload alt="nth-child示例"></p>
<h4 id="3、伪元素选择器（重点）"><a href="#3、伪元素选择器（重点）" class="headerlink" title="3、伪元素选择器（重点）"></a>3、伪元素选择器（重点）</h4><p>伪元素选择器可以帮助我们利用css创建新标签元素，而不需要html标签，从而简化html结构</p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8.png" srcset="/img/loading.gif" lazyload alt="伪元素选择器"></p>
<ul>
<li>注意：<ul>
<li>before和after创建一个元素，但是属于行内元素</li>
<li>新创建的这个元素在文档树中是找不到的，所以我们称为伪元素</li>
<li>语法：<code>element::before&#123;&#125;</code></li>
<li>before和after必须有content属性</li>
<li>before在父元素内容的前面创建元素，after在父元素内容的后面插入元素</li>
<li>伪元素选择器和标签选择器一样，权重为1</li>
</ul>
</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/before%E5%92%8Cafter%E4%BC%AA%E5%85%83%E7%B4%A0.png" srcset="/img/loading.gif" lazyload alt="before和after伪元素"></p>
<h5 id="3-1、使用场景1：配合字体图标"><a href="#3-1、使用场景1：配合字体图标" class="headerlink" title="3.1、使用场景1：配合字体图标"></a>3.1、使用场景1：配合字体图标</h5><ul>
<li>实现效果：</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF1.png" srcset="/img/loading.gif" lazyload alt="伪元素使用场景1"></p>
<ul>
<li>实现方法：</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF1_2.png" srcset="/img/loading.gif" lazyload alt="伪元素使用场景1_2"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF1_3.png" srcset="/img/loading.gif" lazyload alt="伪元素使用场景1_3"></p>
<h5 id="3-2、使用场景2：仿土豆效果"><a href="#3-2、使用场景2：仿土豆效果" class="headerlink" title="3.2、使用场景2：仿土豆效果"></a>3.2、使用场景2：仿土豆效果</h5><ul>
<li>实现效果：</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF2.png" srcset="/img/loading.gif" lazyload alt="伪元素使用场景2"></p>
<ul>
<li>实现方法：</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF2_2.png" srcset="/img/loading.gif" lazyload alt="伪元素使用场景2_2"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF2_3.png" srcset="/img/loading.gif" lazyload alt="伪元素使用场景2_3"></p>
<h5 id="3-3、使用场景3：伪元素清除浮动本质"><a href="#3-3、使用场景3：伪元素清除浮动本质" class="headerlink" title="3.3、使用场景3：伪元素清除浮动本质"></a>3.3、使用场景3：伪元素清除浮动本质</h5><p>伪元素清除浮动，相当于是额外标签法升级和优化</p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF3.png" srcset="/img/loading.gif" lazyload alt="伪元素使用场景3"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E4%BC%AA%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF3_2.png" srcset="/img/loading.gif" lazyload alt="伪元素使用场景3_2"></p>
<h3 id="二、css3盒子模型（box-sizing）"><a href="#二、css3盒子模型（box-sizing）" class="headerlink" title="二、css3盒子模型（box-sizing）"></a>二、css3盒子模型（box-sizing）</h3><ul>
<li><p>css3中可以通过box-sizing来指定盒模型</p>
<ol>
<li><p><code>box-sizing: content-box</code>盒子大小为 width+padding+border（默认）</p>
</li>
<li><p><code>box-sizing: border-box</code>盒子大小为 width</p>
</li>
</ol>
</li>
</ul>
<p>如果盒子模型我们改为了 <code>box-sizing: border-box</code>，那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）</p>
<h3 id="三、图片模糊处理（css3滤镜filter）"><a href="#三、图片模糊处理（css3滤镜filter）" class="headerlink" title="三、图片模糊处理（css3滤镜filter）"></a>三、图片模糊处理（css3滤镜filter）</h3><p>filter css属性将模糊或颜色偏移等图形效果应用于元素</p>
<ul>
<li>语法：</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/filter%E8%AF%AD%E6%B3%95.png" srcset="/img/loading.gif" lazyload alt="filter语法"></p>
<ul>
<li>示例：</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/filter%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81.png" srcset="/img/loading.gif" lazyload alt="filter示例代码"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/filter%E7%A4%BA%E4%BE%8B%E6%95%88%E6%9E%9C.png" srcset="/img/loading.gif" lazyload alt="filter示例效果"></p>
<ul>
<li>补充：backdrop-filter：CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。</li>
</ul>
<h3 id="四、计算盒子宽度（calc函数）"><a href="#四、计算盒子宽度（calc函数）" class="headerlink" title="四、计算盒子宽度（calc函数）"></a>四、计算盒子宽度（calc函数）</h3><p>calc() 此css函数让你在声明css属性值时执行一些计算</p>
<ul>
<li>语法：</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/calc%E8%AF%AD%E6%B3%95.png" srcset="/img/loading.gif" lazyload alt="calc语法"></p>
<ul>
<li>示例：</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/calc%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81.png" srcset="/img/loading.gif" lazyload alt="calc示例代码"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/calc%E7%A4%BA%E4%BE%8B%E6%95%88%E6%9E%9C.png" srcset="/img/loading.gif" lazyload alt="calc示例效果"></p>
<h3 id="五、过渡transition（重点）"><a href="#五、过渡transition（重点）" class="headerlink" title="五、过渡transition（重点）"></a>五、过渡transition（重点）</h3><ul>
<li><p>语法：<code>transition: 要设置过渡的属性 花费时间 运动曲线 何时开始;</code></p>
<ol>
<li><p>属性：想要变化的css属性，宽度、高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以了</p>
</li>
<li><p>花费时间：单位是秒（必须写单位），比如0.5s</p>
</li>
<li><p>运动曲线：默认是ease（可以省略）</p>
</li>
<li><p>何时开始：单位是秒（必须写单位），可以设置延迟触发时间，默认是0s（可以省略）</p>
</li>
</ol>
</li>
<li><p>使用口诀：谁要过渡给谁加</p>
</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E8%BF%87%E6%B8%A11.png" srcset="/img/loading.gif" lazyload alt="过渡1"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E8%BF%87%E6%B8%A12.png" srcset="/img/loading.gif" lazyload alt="过渡2"></p>
<h3 id="六、2D转换transform"><a href="#六、2D转换transform" class="headerlink" title="六、2D转换transform"></a>六、2D转换transform</h3><h4 id="1、移动translate"><a href="#1、移动translate" class="headerlink" title="1、移动translate"></a>1、移动translate</h4><p>2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位</p>
<h5 id="1-1、语法"><a href="#1-1、语法" class="headerlink" title="1.1、语法"></a>1.1、语法</h5><figure class="highlight css"><table><tr><td class="gutter"><div class="code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(x, y); <br><span class="hljs-comment">/* 或者分开写 */</span><br><span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(n);<br><span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(n);<br></code></pre></td></tr></table></figure>

<h5 id="1-2、重点"><a href="#1-2、重点" class="headerlink" title="1.2、重点"></a>1.2、重点</h5><ul>
<li>定义2D转换中的移动，沿着X和Y轴移动元素</li>
<li>translate最大的优点：不会影响到其他元素的位置</li>
<li>translate中的百分比单位是相对于自身元素的 <code>transform: translate(50%, 50%)</code></li>
<li>对行内标签没有效果</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/transform_1.png" srcset="/img/loading.gif" lazyload alt="transform_1"></p>
<h4 id="2、旋转rotate"><a href="#2、旋转rotate" class="headerlink" title="2、旋转rotate"></a>2、旋转rotate</h4><p>2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转</p>
<h5 id="2-1、语法"><a href="#2-1、语法" class="headerlink" title="2.1、语法"></a>2.1、语法</h5><p><code>transform: rotate(度数)</code></p>
<h5 id="2-2、重点"><a href="#2-2、重点" class="headerlink" title="2.2、重点"></a>2.2、重点</h5><ul>
<li>rotate里面跟度数，单位是deg，比如<code>rotate(45deg)</code></li>
<li>角度为正时，顺时针；为负时，逆时针</li>
<li>默认旋转的中心点是元素的中心点</li>
</ul>
<h4 id="3、转换中心点transform-origin"><a href="#3、转换中心点transform-origin" class="headerlink" title="3、转换中心点transform-origin"></a>3、转换中心点transform-origin</h4><p>我们可以设置元素转换的中心点</p>
<h5 id="3-1、语法"><a href="#3-1、语法" class="headerlink" title="3.1、语法"></a>3.1、语法</h5><p><code>transform-origin: x y;</code></p>
<h5 id="3-2、重点"><a href="#3-2、重点" class="headerlink" title="3.2、重点"></a>3.2、重点</h5><ul>
<li>注意后面的参数x和y用空格隔开</li>
<li>x y默认转换的中心点是元素的中心点（50% 50%）</li>
<li>还可以给x y设置像素或方位名词（top buttom left right center）</li>
</ul>
<h4 id="4、缩放scale"><a href="#4、缩放scale" class="headerlink" title="4、缩放scale"></a>4、缩放scale</h4><p>缩放，顾名思义可以放大和缩小。只要给元素添加了这个属性就能控制它放大还是缩小</p>
<h5 id="4-1、语法"><a href="#4-1、语法" class="headerlink" title="4.1、语法"></a>4.1、语法</h5><p><code>transform: scale(x, y);</code></p>
<h5 id="4-2、重点"><a href="#4-2、重点" class="headerlink" title="4.2、重点"></a>4.2、重点</h5><ul>
<li>注意其中的x和y用逗号分割</li>
<li><code>transform: scale(1, 1)</code>：宽和高都放大一倍，相当于没有放大</li>
<li><code>transform: scale(2, 2)</code>：宽和高都放大了2倍</li>
<li><code>transform: scale(2, 2)</code>：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2, 2)</li>
<li><code>transform: scale(0.5, 0.5)</code>：缩小</li>
<li>scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而不影响其他盒子</li>
</ul>
<h4 id="5、2D转换综合写法"><a href="#5、2D转换综合写法" class="headerlink" title="5、2D转换综合写法"></a>5、2D转换综合写法</h4><ul>
<li>同时使用多个装换，其格式为：<code>transform: translate() rotate() scale()</code></li>
<li>其顺序会影响转换的效果（先旋转会改变坐标轴方向）</li>
<li>当我们同时有位移和其他属性时，要将位移放在最前面</li>
</ul>
<h3 id="七、动画animation"><a href="#七、动画animation" class="headerlink" title="七、动画animation"></a>七、动画animation</h3><p>动画（animation）是css3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果</p>
<h4 id="1、动画的基本使用"><a href="#1、动画的基本使用" class="headerlink" title="1、动画的基本使用"></a>1、动画的基本使用</h4><ul>
<li><p>制作动画分为两步：</p>
<ol>
<li>先定义动画</li>
<li>再使用（调用）动画<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 使用keyframes定义动画（类似定义类选择器） */</span><br><span class="hljs-keyword">@keyframes</span> 动画名称 &#123;<br>    <span class="hljs-number">0%</span> &#123;<br>        <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;<br>    &#125;<br>    <span class="hljs-number">100%</span> &#123;<br>        <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>    &#125;<br>&#125;<br><span class="hljs-comment">/* animation-name指定使用动画的名称，animation-duration指定动画执行总时长 */</span><br><span class="hljs-selector-tag">div</span> &#123;<br>    <span class="hljs-attribute">animation-name</span>: move;<br>    <span class="hljs-attribute">animation-duration</span>: <span class="hljs-number">1s</span>;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ol>
</li>
<li><p>动画序列</p>
<ul>
<li>0%是动画的开始，100%是动画的完成，这样的规则就是动画序列</li>
<li>在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果</li>
<li>动画是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式，任意多的次数</li>
<li>请用百分比来规定变化发生的时间，或使用关键词“from”和“to”，等同于0%和100%</li>
</ul>
</li>
</ul>
<h4 id="2、动画常见属性"><a href="#2、动画常见属性" class="headerlink" title="2、动画常见属性"></a>2、动画常见属性</h4><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E5%8A%A8%E7%94%BB%E5%B8%B8%E8%A7%81%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="动画常见属性"></p>
<h4 id="3、动画属性简写"><a href="#3、动画属性简写" class="headerlink" title="3、动画属性简写"></a>3、动画属性简写</h4><p>animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态<br><code>animation: move 5s linear 2s infinite alternate forwards;</code></p>
<ul>
<li>简写属性不包含<code>animation-play-state</code></li>
<li>暂停动画：<code>animation-play-state: puased;</code>经常和鼠标经过等其他配合使用</li>
<li>想要动画走回来，而不是直接跳回来：<code>animation-direction: alternate</code></li>
<li>盒子动画结束后，停在结束位置：<code>animation-fill-mode: forwards</code></li>
</ul>
<h4 id="4、速度曲线细节"><a href="#4、速度曲线细节" class="headerlink" title="4、速度曲线细节"></a>4、速度曲线细节</h4><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E5%8A%A8%E7%94%BB%E9%80%9F%E5%BA%A6%E6%9B%B2%E7%BA%BF.png" srcset="/img/loading.gif" lazyload alt="动画速度曲线"></p>
<ul>
<li>steps 就是分几步来完成我们的动画，有了steps就不要再写ease或者linear了</li>
</ul>
<h3 id="八、3D转换transform"><a href="#八、3D转换transform" class="headerlink" title="八、3D转换transform"></a>八、3D转换transform</h3><h4 id="1、三维坐标系"><a href="#1、三维坐标系" class="headerlink" title="1、三维坐标系"></a>1、三维坐标系</h4><p>三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的</p>
<ul>
<li>x轴：水平向右。x右边是正值，左边是负值</li>
<li>y轴：垂直向下。y下面是正值，上面是负值</li>
<li>z轴：垂直屏幕。往外面是正值，往里面是负值</li>
</ul>
<h4 id="2、3D移动translate3d"><a href="#2、3D移动translate3d" class="headerlink" title="2、3D移动translate3d"></a>2、3D移动translate3d</h4><p>3D移动是在2D的基础上多加了一个可以移动的方向，就是z轴方向</p>
<ul>
<li><code>transform: translateX(100px);</code>：仅仅是在x轴上移动</li>
<li><code>transform: translateY(100px);</code>：仅仅是在y轴上移动</li>
<li><code>transform: translateZ(100px);</code>：仅仅是在z轴上移动（注意：translateZ一般用px单位）</li>
<li><code>transform: translate3d(x, y, z);</code>：其中x、y、z指要移动的轴的方向、距离。不能省略，没有就写0</li>
</ul>
<h4 id="3、透视perspective"><a href="#3、透视perspective" class="headerlink" title="3、透视perspective"></a>3、透视perspective</h4><ul>
<li>透视可以理解为视距，值越小，用户与3D空间z平面越近，视觉效果更强；值越大，用户与3D空间z平面越远，视觉效果越小</li>
<li>透视写在被观察元素的父盒子上，单位是px</li>
<li>translateZ写在被观察的元素上，仅仅是在z轴上移动，有了透视才能看到translateZ引起的变化</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css3%E6%96%B0%E7%89%B9%E6%80%A7/%E9%80%8F%E8%A7%86perspective.png" srcset="/img/loading.gif" lazyload alt="透视perspective"></p>
<h4 id="4、3D旋转rotate3d"><a href="#4、3D旋转rotate3d" class="headerlink" title="4、3D旋转rotate3d"></a>4、3D旋转rotate3d</h4><p>3D旋转指可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转</p>
<ul>
<li><p><code>transform: rotateX(45deg);</code>：沿着x轴正方向旋转45度</p>
</li>
<li><p><code>transform: rotateY(45deg);</code>：沿着y轴正方向旋转45度</p>
</li>
<li><p><code>transform: rotateZ(45deg);</code>：沿着z轴正方向旋转45度</p>
</li>
<li><p><code>transform: rotate3d(x, y, z, deg);</code>：沿着自定义轴旋转，deg为角度（了解）<code>transform: rotate3d(1, 0, 0, 45deg); 沿x轴旋转45度</code></p>
</li>
<li><p>判断元素旋转方向（左手法则）：</p>
<ul>
<li>左手的大拇指指向旋转轴的正方向</li>
<li>其余手指的弯曲方向就是该元素沿旋转轴的旋转方向</li>
</ul>
</li>
</ul>
<h4 id="5、3D呈现transform-style"><a href="#5、3D呈现transform-style" class="headerlink" title="5、3D呈现transform-style"></a>5、3D呈现transform-style</h4><ul>
<li>控制子元素是否开启三维立体环境</li>
<li><code>transform-style: flat;</code>子元素不开启3d立体空间，默认的</li>
<li><code>transform-style: preserve-3d;</code>子元素开启立体空间</li>
<li>代码写给父级，但影响的是子盒子</li>
<li>这个属性很重要，后面必用</li>
</ul>
<h3 id="九、浏览器私有前缀"><a href="#九、浏览器私有前缀" class="headerlink" title="九、浏览器私有前缀"></a>九、浏览器私有前缀</h3><p>浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加</p>
<h4 id="1、私有前缀"><a href="#1、私有前缀" class="headerlink" title="1、私有前缀"></a>1、私有前缀</h4><ul>
<li><code>-moz-</code>：代表firefox浏览器私有属性</li>
<li><code>-ms-</code>：代表ie浏览器私有属性</li>
<li><code>-webkit-</code>：代表safari、chrome私有属性</li>
<li><code>-o-</code>：代表opera私有属性</li>
</ul>
<h4 id="2、提倡写法"><a href="#2、提倡写法" class="headerlink" title="2、提倡写法"></a>2、提倡写法</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css">-moz-<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;<br>-webkit-<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;<br>-o-<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;<br><span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;<br></code></pre></td></tr></table></figure>

<h3 id="十、translate与绝对定位"><a href="#十、translate与绝对定位" class="headerlink" title="十、translate与绝对定位"></a>十、translate与绝对定位</h3><ul>
<li>translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。</li>
<li>当使用translate()时，元素仍然占据其原始空间（有点像position：relative），这与改变绝对定位不同。</li>
</ul>
<h3 id="十一、渐变"><a href="#十一、渐变" class="headerlink" title="十一、渐变"></a>十一、渐变</h3><h4 id="1、线性渐变"><a href="#1、线性渐变" class="headerlink" title="1、线性渐变"></a>1、线性渐变</h4><ul>
<li><p>语法</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">background</span>: <span class="hljs-built_in">line-gradient</span>(起始方向, 颜色<span class="hljs-number">1</span>, 颜色<span class="hljs-number">2</span>, ...);<br><span class="hljs-attribute">background</span>: <span class="hljs-built_in">-webkit-line-gradient</span>(left, red, blue);<br><span class="hljs-attribute">background</span>: <span class="hljs-built_in">-webkit-line-gradient</span>(left top, red, blue);<br></code></pre></td></tr></table></figure></li>
<li><p>背景渐变必须添加浏览器私有前缀</p>
</li>
<li><p>起始方向可以是：方位名词或者度数，如果省略默认就是top</p>
</li>
</ul>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/css/">css</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/css3/">css3</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2022/02/14/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B8%83%E5%B1%80%E7%AE%80%E4%BB%8B/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">移动端布局简介</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2022/02/14/css%E9%AB%98%E7%BA%A7%E6%8A%80%E5%B7%A7/">
                        <span class="hidden-mobile">css高级技巧</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/js/local-search.js" ></script>



  
    <script  src="/js/img-lazyload.js" ></script>
  



  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>


</body>
</html>
